<template>
	<view class="weather-index-container">
		<!-- <text class='title'>天气指数</text> -->
		<view class="detail">{{text}}</view>
	</view>
</template>

<script setup>
	

	import {
		host,
		key
	} from '@/common/weather_api';

	import {
		ref,
		defineProps,
		onBeforeMount
	} from 'vue';

	

	const {
		location
	} = defineProps({
		location: String
	});
	const text = ref('')
	const type = '8';
	const api_url = `https://${host}/v7/indices/1d?location=${location}&type=${type}&key=${key}`;
	const getWeatherIndex = () => {
		uni.request({
			url: api_url,
			method: 'GET',
			success: (res) => {
				text.value = res.data.daily[0].text;
			}
		})
	}

	onBeforeMount(() => {
		getWeatherIndex();
	})
</script>

<style lang="scss" scoped>
	.weather-index-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: auto;
		margin: 10px 0;


		.title {
			color: var(--index_color);
			font-size: 1.25rem;
			font-weight: 600;
		}

		.detail {
			color: var(--index_color);
			font-family: Poppins;
			font-size: 0.94rem;
			font-weight: 600;
			line-height: 1.44rem;
			letter-spacing: 0%;
			text-align: left;
		}

	}
</style>